<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true">
			<template #top>
					<view  style="background-color: #FFFFFF;">
						<u-navbar :border-bottom="false" title="详情" :title-size="36" :title-bold="true" :title-color="textColor" >
						</u-navbar>
						<view class="detials-top">
							<image :src="shopInfo.logoUrl?shopInfo.logoUrl:defaultLogo" mode="" class="details-logo"></image>
							<view class="u-text-center u-font-34" style="font-weight: bold;">{{shopInfo.shopName}}</view>
							<view class="u-text-center u-font-40" style="font-weight: bold;margin: 40rpx 0 60rpx;">￥{{shopInfo.balance}}</view>
							<view class="u-p-l-35 u-p-r-35 u-flex u-m-b-20">
								<view class="select-style u-flex u-row-between" @click="openAccountTypeFn()">
									<text :style="{color:detailsTypeLabel?'#333':'#999'}">{{detailsTypeLabel||'类型'}}</text>
									<u-icon name="arrow-down-fill" :color="detailsTypeLabel?'#333':'#999'"></u-icon>
								</view>
								<view class="select-style  u-flex u-row-between u-m-l-20" @click="incomeTypeShow=true">
									<text :style="{color:incomeLabel?'#333':'#999'}">{{incomeLabel||'收入/支出'}}</text>
									<u-icon name="arrow-down-fill" :color="incomeLabel?'#333':'#999'"></u-icon>
								</view>
							</view>
							<view class="u-p-l-35 u-p-r-35 u-flex u-m-b-20">
								<view class="select-style u-flex u-row-between" @click="detailsStartShow=true">
									<text :style="{color:detailsStartLabel?'#333':'#999'}">{{detailsStartLabel||'起始时间'}}</text>
									<u-icon name="arrow-down-fill" :color="detailsStartLabel?'#333':'#999'"></u-icon>
								</view>
								<view class="select-style  u-flex u-row-between u-m-l-20" @click="detailsEndShow=true">
									<text :style="['u-line-1',{color:detailsEndLabel?'#333':'#999'}]">{{detailsEndLabel||'结束时间'}}</text>
									<u-icon name="arrow-down-fill" :color="detailsEndLabel?'#333':'#999'"></u-icon>
								</view>
							</view>
							<view class="u-p-l-35 u-p-r-35 u-m-b-20">
								<view class="u-flex select-style" style="background-color: ;">
									<view class="u-text-center u-flex-1">收入 <text style="font-weight: 500;">{{totalIncome}}</text>元</view>
									<view class="u-text-center u-flex-1">支出 <text style="font-weight: 500; color: #ff551a;">{{totalExpenditure}}</text>元</view>
								</view>
							</view>
						</view>
					</view>
			</template>
			
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="u-p-l-35 u-p-r-35" style="background-color: #FFFFFF;" v-for="item in dataList" :key="item.id">
				<view class="u-flex u-row-between u-p-t-35 u-p-b-35" style="border-bottom: 1px solid #EEEEEE;" >
					<view class="">
						<view class="u-m-b-20 u-font-30" style="font-weight: bold;">
							{{item.accountType}}
						</view>
						<view class="u-font-24" style="color: #999999;">
							往来单位：{{item.transferShopName}}
						</view>
						<view class="u-font-24" style="color: #999999;">
							{{$mHelper.parseTime(item.createdTime,'{y}-{m}-{d} {h}:{i}')}}
						</view>
					</view>
					<view class="">
						<view class="u-m-b-44 u-text-right u-font-30" :style="{'fontWeight': 'bold','color':item.amount<0?'#FF551A':'#333333'}">
							{{item.amount}}元
						</view>
						<view class="u-text-right u-font-24" style="color: #999999;">
							红包余额 {{item.currentBalance}}元
						</view>
					</view>
				</view>
			
			</view>
		</z-paging>
		<u-select v-model="detailsTypeShow" :list="typeList" @confirm="typeChangeFn" @cancel="typeCancelFn"></u-select>
		<u-select v-model="incomeTypeShow" :list="incomeList" @confirm="incomeChangeFn" @cancel="incomeCancelFn"></u-select>
		<u-picker v-model="detailsStartShow" mode="time" :params="params" @confirm="startTimeChangeFn" @cancel="startTimeCancelFn"></u-picker>
		<u-picker v-model="detailsEndShow" mode="time" :params="params" @confirm="endTimeChangeFn" @cancel="endTimeCancelFn"></u-picker>
		<u-modal v-model="timeTipShow" :show-cancel-button="false"  :content="timeContent" confirm-text="确定"  ></u-modal>
	</view>
</template>

<script>
	// import {parseTime} from '@/utils/helper.js'
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				dataList: [],
				detailsTypeLabel:'',
				detailsStartLabel:'',
				detailsEndLabel:'',
				detailsType:'',
				detailsStart:'',
				detailsEnd:'',
				incomeLabel:'',
				incomeType:'',
				detailsTypeShow:false,
				detailsStartShow:false,
				detailsEndShow:false,
				incomeTypeShow:false,
				accountOuterChainType:['支付订单','核销优惠券','官方赠送','奖励金额'],
				typeList:[],
				incomeList:[
					{
						value: true,
						label: '收入'
					},
					{
						value: false,
						label: '支出'
					},
					
				],
				shopInfo:{},
				params:{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					// 选择时间的时间戳
					timestamp: true,
				},
				transferShow:false,
				useAmount:'',
				useShopNo:'',
				shopNameByNo:'',
				submitTransferLoading:false,
				transactionType:false,
				totalIncome:0,
				totalExpenditure:0,
				timeTipShow:false,
				timeContent:'',
			}
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		onLoad(options){
			this.shopInfo = JSON.parse(options.data);
			console.log(this.shopInfo);
			let newStartTime = new Date()-(30*24 * 60 * 60 * 1000);
			this.detailsStartLabel = this.$u.timeFormat(newStartTime,'yyyy-mm-dd hh:MM');
			this.detailsStart = this.$u.timeFormat(newStartTime,'yyyy-mm-dd hh:MM');
			let newEndTime = new Date(this.detailsStart).getTime() + ( 30 * 24 * 60 * 60 * 1000);
			this.detailsEndLabel = this.$u.timeFormat(newEndTime,'yyyy-mm-dd hh:MM');
			this.detailsEnd = this.$u.timeFormat(newEndTime,'yyyy-mm-dd hh:MM');
			this.getAccountTypeList();
		},
		methods: {
			async getAccountTypeList(){
				const res = await this.$newHttp.get('api/v1.3/AccountBook/GetAccountChainTypes' );
				if(res.code  === 200){
					this.typeList = res.data.map(item=>{
						return {value:item.value,label:item.description}
					})
				}else{
					this.typeList = [];
				}
			},
			async openAccountTypeFn(){
				if(this.typeList.length === 0){
					await this.getAccountTypeList();
				};
				this.detailsTypeShow=true;
			},
			incomeChangeFn(data){
				this.incomeLabel = data[0].label;
				this.incomeType = data[0].value;
				this.$refs.paging.reload();
			},
			incomeCancelFn(){
				this.incomeLabel = '';
				this.incomeType = '';
				this.$refs.paging.reload();
			},
			typeChangeFn(data){
				this.detailsTypeLabel = data[0].label;
				this.detailsType = data[0].value;
				this.$refs.paging.reload();
			},
			typeCancelFn(){
				this.detailsTypeLabel = '';
				this.detailsType = '';
				this.$refs.paging.reload();
			},
			// 计算两个时间段相差天数
			getDaysBetween(startDate, enDate) {
			  const sDate = Date.parse(startDate)
			  const eDate = Date.parse(enDate)
			  if (sDate > eDate) return 0    //开始日期大于结束日期，返回0
			  if (sDate === eDate) return 1  //如果日期相同 返回一天 
			  return (eDate - sDate) / (24 * 60 * 60 * 1000)
			},
			startTimeChangeFn(data){
				let dateStr = data.year+'-'+data.month+'-'+data.day+' '+data.hour+':'+data.minute+':'+data.second;
				let dateStr2 = data.year+'-'+data.month+'-'+data.day+' '+data.hour+':'+data.minute;
				if(this.detailsEnd!=''){
					let reduceDay = this.getDaysBetween(dateStr,this.detailsEnd);
					if(reduceDay>92||reduceDay<=0){
						let newStartTime = new Date(this.detailsEnd)-(92*24 * 60 * 60 * 1000);
						this.detailsStartLabel = this.$u.timeFormat(newStartTime,'yyyy-mm-dd hh:MM');
						this.detailsStart = this.$u.timeFormat(newStartTime,'yyyy-mm-dd hh:MM');
						this.timeContent = '最多显示3个月的交易明细，所以为您自动配置起始时间';
						this.timeTipShow = true;
						// this.$u.toast('最多显示3个月的交易明细，所以为您自动配置起始时间');
					}else{
						this.detailsStartLabel = dateStr2;
						this.detailsStart = dateStr;
					}
				}else{
					this.detailsStartLabel = dateStr2;
					this.detailsStart = dateStr;
				}
				this.$refs.paging.reload();
			},
			startTimeCancelFn(){
				this.detailsStartLabel = '';
				this.detailsStart = '';
				this.$refs.paging.reload();
			},
			endTimeChangeFn(data){
				let dateStr = data.year+'-'+data.month+'-'+data.day+' '+data.hour+':'+data.minute+':'+data.second;
				let dateStr2 = data.year+'-'+data.month+'-'+data.day+' '+data.hour+':'+data.minute;
				if(this.detailsStart!=''){
					let reduceDay = this.getDaysBetween(this.detailsStart,dateStr);
					if(reduceDay>92||reduceDay<=0){
						let newEndTime = new Date(this.detailsStart).getTime() + ( 92 * 24 * 60 * 60 * 1000);
						this.detailsEndLabel = this.$u.timeFormat(newEndTime,'yyyy-mm-dd hh:MM');
						this.detailsEnd = this.$u.timeFormat(newEndTime,'yyyy-mm-dd hh:MM');
						this.timeContent = '最多显示3个月的交易明细，所以为您自动配置结束时间';
						this.timeTipShow = true;
					}else{
						this.detailsEndLabel = dateStr2;
						this.detailsEnd = dateStr;
					}
				}else{
					this.detailsEndLabel = dateStr2;
					this.detailsEnd = dateStr;
				}
				this.$refs.paging.reload();
			},
			endTimeCancelFn(){
				this.detailsEndLabel = '';
				this.detailsEnd = '';
				this.$refs.paging.reload();
			},
			// 余额变动列表上拉加载下拉刷新
			async queryList(pageNo, pageSize) {
				console.log(pageNo,pageSize);
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					shopId:this.storeShop.id,
					BuyerId:this.shopInfo.shopId,
				}
				if(this.detailsType!==''){
					params.OuterChainType = this.detailsType;
				}
				if(this.incomeType!==''){
					params.Income = this.incomeType;
				}
				if(this.detailsStart!==''){
					params.BeginTime = this.detailsStart;
				}
				if(this.detailsEnd!==''){
					params.EndTime = this.detailsEnd;
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/v1.3/AccountBook/BrandOwnerGetAccountBookDetailsPage', { params: params } );
				uni.hideLoading({
					title: 'loading...'
				})
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
					this.totalIncome = res.data.totalIncome;
					this.totalExpenditure = res.data.totalExpenditure;
					this.shopInfo.shopName = res.data.shopName;
					this.shopInfo.balance = res.data.balance;
					this.shopInfo.logoUrl = res.data.logoUrl;
				}else{
					this.$refs.paging.complete(false);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css';
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;
		.detials-top{
			.details-logo{
				width: 80rpx;
				height: 80rpx;
				margin: 70rpx auto 35rpx;
				display: block;
				border-radius: 50%;
			}
			.select-style{
				background-color: #EEEEEE;
				box-sizing: border-box;
				padding: 0 20rpx !important;
				border-radius: 10rpx;
				height: 80rpx;
				flex: 1;
				line-height: 80rpx;
			}
			.operate-style{
				height: 80rpx;
				flex: 1;
				line-height: 80rpx;
				border-radius: 33px;
				&:nth-of-type(1){
					color:#65CAFF;
					border: 2px solid #65CAFF;
				}
				&:nth-of-type(2){
					color:#ff551a;
					border: 2px solid #ff551a;
				}
			}
		}
	}
	
</style>
